$f: 19.2;

body {
  background: #01000A;
  color: white;
}

.home {
  overflow: hidden;
  .banner {
    position: relative;

    &::after {
      content: '';
      display: block;
      background: url(../images/shadow.png) no-repeat;
      background-size: cover;
      position: absolute;
      left: 0;
      bottom: -46/$f+vw;
      width: 100%;
      height: 350/$f+vw;
    }

    img {
      width: 100%;
      display: block;
      height: 100vh;
      object-fit: cover;
    }

    .text {
      position: absolute;
      left: 150/$f+vw;
      top: 534/$f+vw;
      color: #FFF;
      font-size: 96/$f+vw;
      font-weight: 500;
      line-height: 1;
      text-transform: capitalize;
      line-height: 1.1;
      z-index: 10;
    }
  }

  .section1 {
    padding: 114/$f+vw 380/$f+vw 160/$f+vw 150/$f+vw;
    position: relative;

    .bg {
      position: absolute;
      right: 0;
      top: 0;
      img {
        width: 585/$f+vw;
      }
    }

    .list {
      position: relative;
      z-index: 10;
      .item {
        border-bottom: 2px solid rgba(142, 210, 255, 0.40);
        padding: 50/$f+vw 0;
        cursor: pointer;

        .d1 {
          display: flex;
          justify-content: space-between;
          align-items: center;

          p {
            color: #FFF;
            font-size: 32/$f+vw;
            line-height: 1;
          }

          .icon {
            height: 30/$f+vw;
            width: 30/$f+vw;
            position: relative;

            span {
              position: absolute;
              left: 50%;
              top: 50%;
              transform: translate(-50%, -50%);
              transition: all 600ms;
            }

            span:nth-child(1) {
              width: 100%;
              height: 2/$f+vw;
              background: #002FFF;
            }

            span:nth-child(2) {
              height: 100%;
              width: 2/$f+vw;
              background: #002FFF;
            }
          }
        }

        .d2 {
          display: none;
          .html{
            margin-top: 40/$f+vw;
            p {
              font-size: 20/$f+vw;
              line-height: 1.5;
              position: relative;
  
              &::before {
                content: '';
                display: block;
                position: absolute;
                left: -15/$f+vw;
                top: 13/$f+vw;
                width: 6/$f+vw;
                height: 6/$f+vw;
                background: white;
                border-radius: 50%;
              }
            }
          }
        }
      }
      .on{
        .d1{
          .icon{
             span:nth-child(2){
              transform: translate(-50%, -50%) rotate(90deg);
             }
          }
        }
      }
    }
  }

  .section2 {
    margin: 0 150/$f+vw 160/$f+vw 150/$f+vw;

    .p1 {
      font-size: 64/$f+vw;
      text-transform: capitalize;
    }

    .p2 {
      margin: 18/$f+vw 0 80/$f+vw 0;
      font-size: 24/$f+vw;
      line-height: 1.5;
    }

    .allItems {
      display: flex;

      .item {
        border-radius: 3px;
        border: 2px solid #1FA5FD;
        background: #01000A;
        padding: 35/$f+vw 28/$f+vw;
        display: flex;
        align-items: center;
        .icon{
          margin-right: 10/$f+vw;
          svg{
            width: 30/$f+vw;
            display: block;
          }
        }
        .des{
          font-size: 20/$f+vw;
        }
        &:not(:first-child){
          margin-left: 80/$f+vw;
        }
      }
    }
  }
  @media screen and (max-width: 1024px) {
    .banner{
      img{
        height: 300px;
      }
      .text{
        font-size: 28px;
        top:50%;
        line-height: 1.2;
      }
    }
    .section1{
      padding: 30px 5%;
      .list{
      .item{
        padding: 20px 0;
        .d1{
          p{
            font-size: 18px;
          }
          .icon{
            width: 20px;
            height: 20px;
          }
        }
        .d2{
          .html{
            margin-top: 10px;
            p{
              font-size: 14px;
              &::before{
                display: none;
              }
            }
          }
        }
      }
      }
      .bg{
        img{
          width:200px;
        }
      }
    }
    .section2{
      margin: 30px 5% 60px 5%;
      .p1{
        font-size: 28px;
      }
      .p2{
        font-size: 18px;
        margin: 15px 0 30px 0;
      }
      .allItems{
        flex-direction: column;
        .item{
          padding: 20px 10px;
          .icon{
            svg{
              width:30px;
            }
          }
          .des{
            font-size: 14px;
          }
          &:not(:first-child){
            margin-left: 0;
            margin-top: 10px;
          }
        }
      }
    }
  }
}